<template>
  <div style="height: 100%">
    <CommentList
      :comments="comments"
      :hotComments="hotComments"
      :total="total"
    />
  </div>
</template>

<script setup>
import { useRoute } from "vue-router"
import CommentList from "../../components/CommentList/CommentList.vue"
import { getComment } from "@/api"
import { onMounted, ref } from "vue"

const route = useRoute()

const comments = ref([])
const hotComments = ref([])
const total = ref([])

onMounted(async () => {
  const id = route.params.id
  const responseDetail = await getComment(id)
  comments.value = responseDetail.data.comments
  hotComments.value = responseDetail.data.hotComments
  total.value = responseDetail.data.total
  // list.value = responseDetail.data.playlist.tracks
  // console.log(list.value);
})
</script>

<style></style>
